<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">{{userName}}直属团队</block>
		</cu-custom>
		<view class="bg-white margin">
			<view v-for="(item,index) in list" :key="index" class="list-item cu-item space-between padding-tb-sm solid-bottom margin-lr">
				<view class="cu-avatar default_avatar round lg">
					<image v-if="item.member" :src="item.member.head_portrait" mode="aspectFill"></image>
					<image v-else :src="item.head_portrait" mode="aspectFill"></image>
				</view>
				<view class="content margin-left-sm  w100">
					<view class="firstline ">
						<text class="cu-tag sm bg-orange round">{{item.level.name}}</text>
						<text class="margin-left-sm">{{item.nickname}}</text>
					</view>
					<view class="margin-top-xs">ID：{{item.id}}</view>
				</view>
				<view class="action" style="min-width: 80px;">
					<!-- <view class="text-cut text-right margin-bottom-sm" v-if="tab.type == 3 && item.city">{{item.city.title}}</view> -->
					<view class="time text-right text-gray ">{{$common.timeFormat(item.created_at,'YYYY-MM-DD')}}</view>
					<view class="text-yellow margin-top-sm text-right" @tap="goList(item.id, item.nickname)">团队详情</view>
				</view>
			</view>

			<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin', 'member']),
		data() {
			return {
				id: 0,
				type: 0,
				count: 0,
				curPage: 1,
				list: [],
				isEmpty: false,
				loading: false,
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth()) {
				console.log(options)
				this.id = parseInt(options.id)
				this.userName = options.name
				this.getList()
			}
		},
		onShow() {
			this.$common.loginAuth(true)
		},
		methods: {
			getList() {
				this.loading = true
				let _this = this
				let reqData = {
					type: this.type,
					page: _this.curPage,
					size: 10,
					pid: _this.id
				}
				_this.$http
					.get('team_list', reqData)
					.then((response) => {
						console.log(response)
						let list = _this.list
						if (response.data.data.length > 0) {
							list = list.concat(response.data.data)
						} else {
							// _this.isEmpty = true
						}
						_this.list = list
						_this.curPage += 1

						this.loading = false
					})
					.catch((response) => {
						console.log(response)
					})
			},
			goList(id, name) {
				uni.navigateTo({
					url: "/pages/member/team/list?id=" + id + "&name=" + name
				})
			},
		},
		onReachBottom() {
			this.getList()
		},
	}
</script>

<style>
	.scroll-list {
		height: 100vh;
	}

	.white-box {
		width: 678rpx;
		margin: 25rpx 36rpx 0;
		padding: 0rpx 36rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;
	}

	.white-box .top-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		line-height: 55rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx #EEEEEE solid;
	}

	.white-box .scroll-list {
		display: flex;
		flex-direction: column;
	}

	.scroll-list .list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx #f2f2f2 solid;
		padding-bottom: 30rpx;
		margin-top: 30rpx;
	}

	.list-item .avatar {
		margin-top: 0;
		flex-shrink: 0;
	}

	.list-item .avatar image {
		width: 114rpx;
		height: 114rpx;
		margin-left: 10rpx;
		margin-right: 24rpx;
	}

	.list-item .content {
		flex: 1;
	}

	.list-item .content .firstline {
		display: flex;
		align-items: center;
	}

	.firstline .name {
		color: #3E3E3E;
		font-size: 28rpx;
		font-weight: bold;
		width: 220rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.firstline .status {
		margin-left: 10rpx;
		color: #FF003C;
		font-size: 26rpx;
	}

	.list-item .content .id {
		margin-top: 4rpx;
		color: #3E3E3E;
		font-size: 24rpx;
	}

	.list-item .time-action {
		flex-shrink: 0;
		margin-right: 10rpx;
		text-align: right;
	}

	.list-item .time-action .time {
		color: #646464;
		font-size: 24rpx;
	}

	.list-item .time-action .action {
		margin-top: 4rpx;
		color: #FBB240;
		font-size: 24rpx;
		font-weight: bold;
	}
</style>
